<template>
  <div class="big">
      <!-- 黑层 -->
    <div class="Permissiond" :style="{zIndex: zindex,backgroundColor:whitecolor,display:showd ? 'block':'none'}">
        <span :style="{ display:showd ? 'block':'none'}">🔒权限不足</span>
    </div>
    <div class="big-box">
      <div class="box" style="display: flex;overflow: hidden; ">
        <div class="row">
          <img src="../../assets/img/zsy1.png" alt="" style="width: 100%;height: 100px;">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <div class="kehu">研发执行</div>
              <div>
                <div>
                  <el-table :data="tableData" stripe style="width: 100%;font-size: 11px">
                    <el-table-column prop="projectName" label="研发名称">
                    </el-table-column>
                    <el-table-column prop="rdType" label="研发类型">
                    </el-table-column>
                    <el-table-column prop="rdStage" label="研发阶段">
                    </el-table-column>
                    <el-table-column prop="researchDevelopment" label="研发日期">
                    </el-table-column>
                    <el-table-column prop="rdCity" label="研发城市">
                    </el-table-column>
                    <el-table-column prop="rdProgress" label="研发进度">
                    </el-table-column>
                  </el-table>
                </div>
              </div>

          </el-tabs>

        </div>
        <div class="row1">
          <img src="../../assets/img/zsy2.png" alt="" style="width: 100%;height: 100px;">
          <div class="row2" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
            <div class="row2_1" v-for="(item, index) in zsy " :key="index">
              <img :src="item.c" alt="" style="width: 70px;height: 70px; margin-top: 15px; margin-left: 10px;">
              <div style="margin-top: 20px; margin-left: 10px;font-size: 18px;color: blue;">{{ item.a }}</div>
              <div style="margin-top: 50px; font-size: 14px;margin-left: -20px;">{{ item.b }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二层 -->
    <div class="big-box">
      <div class="box" style="display: flex;overflow: hidden; ">
        <div class="roww1">
          <div class="kehu" @click="Plan">研发计划</div>
          <div class="roww1_1">
            <div>
                <div>
                  <el-table  stripe style="width: 100%;font-size: 11px" :data="tableData2">
                    <el-table-column prop="topic" label="主题">
                    </el-table-column>
                    <el-table-column prop="details" label="主办人">
                    </el-table-column>
                    <el-table-column prop="startDate" label="开始日期">
                    </el-table-column>
                    <el-table-column prop="endDate" label="结束日期">
                    </el-table-column>
                    <el-table-column prop="topic" label="详细">
                    </el-table-column>

                  </el-table>
                </div>
              </div>
          </div>
        </div>
        <div class="roww2">
          <div class="kehu" @click="Copybase">文案库</div>
          <el-card class="box-card" :data="tableData3">
            <div v-for="(item, index) in tableData3" :key="index" style="width: 100%;">
              <div style="color:blue;font-size: 18px;margin-top: 20px;">{{item.content}}</div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
      <div class="big-box">
      <div class="box" style="display: flex;overflow: hidden; ">
        <div class="rowww1">
          <div class="kehu" @click="Task">任务</div>
          <span @click="Signin">考情统计</span>
          <div @click="Leaves">请假申请</div>
          <div class="roww1_1">
            <div>
              <el-table :data="tableData3" stripe style="width: 100%;font-size: 11px">
                <el-table-column prop="name" label="客户来源">
                </el-table-column>
                <el-table-column prop="leixing" label="问题是否解决">
                </el-table-column>
                <el-table-column prop="fw" label="服务评价">
                </el-table-column>
                <el-table-column prop="zt" label="评价状态">
                </el-table-column>
                <el-table-column prop="rq" label="提交日期">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="rowww2">
          <div class="kehu">研发</div>
          <img style="width: 100%;height: 60%; margin-top: 20px;"
            src="https://enterprise.e-cology.com.cn/page/resource/userfile/image/shichang002.png" alt="">
          <div style="display: flex;">
            <div style="width: 25%; margin-left: 9%;">
              <div>
                <img src="https://enterprise.e-cology.com.cn/page/resource/userfile/image/1icon01.png"
                  @click="tiaozhuan3">
                <div style="margin-top: -10px;margin-left: 20px;">研发申请</div>
              </div>
            </div>
            <div style="width: 25%;">
              <div>
                <img src="https://enterprise.e-cology.com.cn/page/resource/userfile/image/1icon02.png"
                @click="tiaozhuan4">
                <div style="margin-top: -10px;margin-left: 20px;">研发计划</div>
              </div>
            </div>
            <div style="width: 25%;">
              <div>
                <img src="https://enterprise.e-cology.com.cn/page/resource/userfile/image/1icon03.png"
             @click="tiaozhuan2">
                <div style="margin-top: -10px;margin-left: 20px;">发部文案</div>
              </div>
            </div>
            <div style="width: 25%;">
              <div>
                <img src="https://enterprise.e-cology.com.cn/page/resource/userfile/image/1icon04.png"
                  @click="tiaozhuan1">
                <div style="margin-top: -10px;margin-left: 20px;">活动查询</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import {selectplan,selectRes,selectOfficial } from '../../api/research'
export default {
  mounted(){
    this.selectplan();
    this.selectRes();
    this.selectOfficial();

  },

  data() {
    return {
        zindex: "",
      showd:true,
      activeName: 'second',
      //  第一层
      tableData: [],
      //  第二层
      tableData2: [],
      //  文案
      tableData3: [],

      zsy: [
        {
          c: 'https://enterprise.e-cology.com.cn/cloudstore/release/3d14457595ef4785a1ee406c5650c01d/resources/shichang01.png',
          a: '92',
          b: '活动数量'
        },
        {
          c: 'https://enterprise.e-cology.com.cn/cloudstore/release/3d14457595ef4785a1ee406c5650c01d/resources/shichang03.png',
          a: '709',
          b: '活动分享'
        },
        {
          c: 'https://enterprise.e-cology.com.cn/cloudstore/release/3d14457595ef4785a1ee406c5650c01d/resources/shichang04.png',
          a: '173',
          b: '线索数量'
        },
        {
          c: 'https://enterprise.e-cology.com.cn/cloudstore/release/3d14457595ef4785a1ee406c5650c01d/resources/shichang02.png',
          a: '100',
          b: '活动成本'
        },
        {
          c: 'https://enterprise.e-cology.com.cn/cloudstore/release/3d14457595ef4785a1ee406c5650c01d/resources/shichang03.png',
          a: '462',
          b: '文章查询'
        },
        {
          c: 'https://enterprise.e-cology.com.cn/cloudstore/release/3d14457595ef4785a1ee406c5650c01d/resources/shichang05.png',
          a: '52',
          b: '线索转化'
        },
      ]
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    tiaozhuan1() {
      this.$router.push("/charts/src.assets/register")
    },
    tiaozhuan3() {
      this.$router.push("/charts/zxinjia")
    },
    tiaozhuan2(){
      this.$router.push("/charts/src.assets/wenan")
    },
    tiaozhuan4(){
      this.$router.push("/charts/src.assets/researchx")
    },
    Copybase(){
      this.$router.push("/charts/src.assets/Copybase")
    },
    Plan(){
      this.$router.push("/charts/src.assets/plan")
    },
    Task(){
      this.$router.push("/charts/src.assets/task")
    },
    Signin(){
      this.$router.push("/charts/signin/Signinrecord")
    },
    Leaves(){
      this.$router.push("/charts/leave/Leaves.vue")
    },

    selectplan(){
      selectplan().then(res => {
      console.log(res);
      this.tableData2 = res.result;
    })
    },
    selectRes(){
      selectRes().then(res => {
        if(res.code == 200){
          console.log(res);
           this.showd = !this.showd
          this.tableData=res.result;
        }else{
           this.zindex = '1000'
          // alert("没有权限")
          this.showd = this.showd
        }

    })
    },
    selectOfficial(){
      selectOfficial().then(res => {
      console.log(res);
      this.tableData3=res.result;
    })
    }


  }
}
</script>
<style scoped>
.Permissiond{
    position: fixed;
    width: 100%;
    height: 100%;
    color: rgb(234, 240, 246);
    padding-left: 35%;
    padding-top: 20%;
    font-size: 50px;
    background-color: white ;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.big {
  background-color: rgb(234, 239, 244);
}

/*第一层 */
.dian {
  color: #000000;
}

.row {
  width: 65%;
  height: 450px;
  background-color: rgb(255, 255, 255);
}

.row1 {
  width: 35%;
  height: 450px;
  margin-left: 15px;
  background-color: #ffffff;
}

.row2 {
  width: 100%;
  height: 351px;
  margin-top: -5px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-wrap: wrap;
}

.row2_1 {
  width: 45%;
  height: 100px;
  display: flex;
  background-color: rgb(255, 255, 255);
  margin-top: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* 第二层 */
.roww1 {
  width: 65%;
  height: 450px;
  background-color: rgb(255, 255, 255);
  margin-top: 20px;
}

.roww2 {
  width: 35%;
  height: 450px;
  margin-left: 15px;
  margin-top: 20px;
  background-color: rgb(255, 255, 255);
}

.kehu {
  color: #0048ff;
  font-size: 16px;
}

.roww1_1 {
  margin-top: 20px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  margin-top: 20px;
  width: 100%;
  height: 100%;
}

/* 第三层 */
.rowww1 {
  width: 65%;
  height: 450px;
  background-color: rgb(255, 255, 255);
  margin-top: 20px;
}

.rowww2 {
  width: 35%;
  height: 450px;
  margin-left: 15px;
  margin-top: 20px;
  background-color: #ffffff;
}
</style>
